<template>
  <div class="pages-container">
    <div style="padding: 20px">
      <v-row>
        <v-col cols="10" :offset="1">
          <v-divider orientation="left"> </v-divider>
          <v-row align="center" style="margin: 30px 0">
            <v-col cols="3" style="text-align: right">角色名称</v-col>
            <v-col cols="4" :offset="1">
              <v-text-field v-model="data.title"></v-text-field>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="5" :offset="1">
          <v-row>
            <v-divider orientation="left"> </v-divider>
            <v-treeview
              style="width: 100%"
              hoverable
              open-all
              selectable
              :items="treeData"
              :value="checkedKeys"
              @input="nodeCheck"
            >
              <template v-slot:append="{ item }">
                <v-icon
                  v-if="!(item.children && item.children.length)"
                  style="cursor: pointer"
                  @click="nodeClick(item)"
                  >mdi-folder-open</v-icon
                >
              </template>
            </v-treeview>
          </v-row>
        </v-col>
        <v-col
          cols="5"
          :offset="1"
          v-if="pageAuthIndex !== -1 && pageAuthSwitch"
        >
          <v-divider orientation="left"> </v-divider>
          <h2>按钮权限：({{ pageAuthIndex }})</h2>
          <div>
            <label
              style="float: left"
              v-for="(item, index) in pageAuth[pageAuthIndex]"
              :key="index"
            >
              <template>
                <span style="margin: 10px">{{ item.buttonDesc }}</span>
                <v-switch
                  style="margin-right: 30px"
                  v-model="item.isHide"
                ></v-switch>
              </template>
            </label>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-row style="margin-top: 50px">
          <v-col cols="4" :offset="3">
            <v-btn type="primary" block @click="submit"> 保存 </v-btn>
          </v-col>
        </v-row>
      </v-row>
    </div>
  </div>
</template>

<script>
import config from "../../tools/config";
import routerTool from "@/router/vouter.tools";

export default {
  name: "CoinList.vue",
  data() {
    return {
      // 公用配置
      id: "",
      Config: {},
      checkedKeys: [],
      treeData: [],
      data: {
        name: "",
        desc: "",
      },
      pageAuthSwitch: true, // 按钮权限开关
      pageAuthIndex: -1,
      pageAuth: {
        用户管理: [
          { buttonName: "UserEdit", buttonDesc: "编辑", pkey: "用户管理", isHide: true, },
          { buttonName: "UserResetPassword", buttonDesc: "重置密码", pkey: "用户管理", isHide: true, },
          { buttonName: "UserFollow", buttonDesc: "流水", pkey: "用户管理", isHide: true, },
        ],
      },
    };
  },
  created() {
    this.id = this.$route.query.id || "";
    this.Config = config;
    // 获取树数据
    this.treeData = routerTool.getRoleAuthTree();
    this.getData();
  },
  methods: {
    /**
     * 请求Table数据
     * @param pages
     */
    getData() {
      let data = {};
      if (this.id) {
        data = { id: this.id };
      } else {
        return;
      }
      this.Http.get("/admin/group/detail", data)
        .then((res) => {
          if (res.code === 1) {
            this.data = res.data;
            this.checkedKeys = res.data.menu.split(",");
            // 处理按钮权限
            if (res.data.button) {
              let _pageAuth = {};
              Object.values(this.pageAuth).forEach((item, index) => {
                _pageAuth[Object.keys(this.pageAuth)[index]] = Object.values(
                  this.pageAuth
                )[index].map((button) => {
                  let _button = button;
                  let _is = false;
                  let _isObject = {};
                  res.data.button[Object.keys(this.pageAuth)[index]].forEach(
                    (resButton) => {
                      if (button.buttonName === resButton.buttonName) {
                        _is = true;
                        _isObject = resButton;
                      }
                    }
                  );
                  if (_is) {
                    _button.isHide = _isObject.isHide;
                  }
                  return _button;
                });
              });
              this.pageAuth = _pageAuth;
            }
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(() => {});
    },

    /**
     * 选择节点
     */
    nodeClick(item) {
      console.log("update", item);
      if (!item.children || item.children.length === 0) {
        this.pageAuthIndex = item.name;
      } else {
        this.pageAuthIndex = -1;
      }
    },

    /**
     * 选择多选框后触发
     * @param checkedKeys
     */
    nodeCheck(checkedKeys) {
      console.log("input", checkedKeys);
      this.checkedKeys = checkedKeys;
    },

    submit() {
      let url, data;
      if (this.id) {
        url = "/admin/group/update";
        data = {
          id: this.data.id,
          title: this.data.title,
          menu: this.checkedKeys.join(","),
          button: this.pageAuth,
        };
      } else {
        url = "/admin/group/create";
        data = {
          title: this.data.title,
          menu: this.checkedKeys.join(","),
          button: this.pageAuth,
        };
      }
      this.Http.post(url, data).then((res) => {
        if (res.code == 1) {
          this.getData();
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.roleTree {
  padding-left: 10%;
}
</style>
